<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  
  <title>【React入门】实现todolist功能 | 程序小工  | Just do it!</title>
  <meta name="description" content="遇见更好的自己~" />
  <meta name="keywords" content="" />
  <meta name="HandheldFriendly" content="True" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <link rel="shortcut icon" href="/">
  <link rel="alternate" href="/atom.xml" title="程序小工  | Just do it!">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="作为一名 PHP 初级的程序员，目前尚且处于学习 PHP 业务逻辑实现到日常工作中的阶段，但是由于现在想要搭建一个满意的个人博客，并且尝试过很多 hexo 主题后总是会对主题的某些或某个部分不太满意， 所以为了以后可以自己实现相应页面的开发，所以还是想着能够学点前端框架的知识，为以后成为全栈工程师做准备。目前比较流行的前端框架主要有React.js和Vue.js，因为当前公司使用的是React.j">
<meta name="keywords" content="web">
<meta property="og:type" content="article">
<meta property="og:title" content="【React入门】实现todolist功能">
<meta property="og:url" content="http://blog.i2arch.tech/2018/08/08/js-react/index.html">
<meta property="og:site_name" content="程序小工  | Just do it!">
<meta property="og:description" content="作为一名 PHP 初级的程序员，目前尚且处于学习 PHP 业务逻辑实现到日常工作中的阶段，但是由于现在想要搭建一个满意的个人博客，并且尝试过很多 hexo 主题后总是会对主题的某些或某个部分不太满意， 所以为了以后可以自己实现相应页面的开发，所以还是想着能够学点前端框架的知识，为以后成为全栈工程师做准备。目前比较流行的前端框架主要有React.js和Vue.js，因为当前公司使用的是React.j">
<meta property="og:locale" content="zh-Hans">
<meta property="og:updated_time" content="2018-08-15T07:09:31.925Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="【React入门】实现todolist功能">
<meta name="twitter:description" content="作为一名 PHP 初级的程序员，目前尚且处于学习 PHP 业务逻辑实现到日常工作中的阶段，但是由于现在想要搭建一个满意的个人博客，并且尝试过很多 hexo 主题后总是会对主题的某些或某个部分不太满意， 所以为了以后可以自己实现相应页面的开发，所以还是想着能够学点前端框架的知识，为以后成为全栈工程师做准备。目前比较流行的前端框架主要有React.js和Vue.js，因为当前公司使用的是React.j">
    
  <link href="https://fonts.googleapis.com/css?family=Inconsolata|Titillium+Web" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
  <link href='//cdn.bootcss.com/node-waves/0.7.5/waves.min.css' rel='stylesheet'>
  <link rel="stylesheet" href="/style.css">
  <script>
    function setLoadingBarProgress(num) {
      document.getElementById('loading-bar').style.width=num+"%";
    }
  </script>
</head>

<body>
  <div id="loading-bar-wrapper">
  <div id="loading-bar"></div>
</div>


  <script>setLoadingBarProgress(20)</script>
  <header class="l_header">
	<div class='wrapper'>
		<div class="nav-main container container--flex">
			<a class="logo flat-box" href='/' >
				程序小工  | Just do it!
			</a>
			<div class='menu'>
				<ul class='h-list'>
					
						<li>
							<a class='flat-box nav-home' href='/'>
								<i class='icon icon-list2'></i>
								首页
							</a>
						</li>
					
						<li>
							<a class='flat-box nav-archives' href='/archives'>
								<i class='icon icon-bookmark'></i>
								归档
							</a>
						</li>
					
						<li>
							<a class='flat-box nav-about' href='/about'>
								<i class='icon icon-user'></i>
								关于
							</a>
						</li>
					
				</ul>
				<div class='underline'></div>
			</div>
			
				<div class="m_search">
					<form name="searchform" class="form u-search-form">
						<input type="text" class="input u-search-input" placeholder="Search" />
						<span class="icon icon-search"></span>
					</form>
				</div>
			
			<ul class='switcher h-list'>
				
					<li class='s-search'><a href='javascript:void(0)'><span class="icon icon-search flat-box"></span></a></li>
				
				<li class='s-menu'><a href='javascript:void(0)'><span class="icon icon-menu flat-box"></span></a></li>
			</ul>
		</div>

		<div class='nav-sub container container--flex'>
			<a class="logo" class="flat-box" href='javascript:void(0)'>
				Word of Forks
			</a>

			<ul class='switcher h-list'>
				<li class='s-comment'><a href='javascript:void(0)'><span class="icon icon-chat_bubble_outline flat-box"></span></a></li>
				<li class='s-top'><a href='javascript:void(0)'><span class="icon icon-arrow_upward flat-box"></span></a></li>
				<li class='s-toc'><a href='javascript:void(0)'><span class="icon icon-format_list_numbered flat-box"></span></a></li>
			</ul>
		</div>
	</div>
</header>
<aside class="menu-phone">
	<nav>
		
			<a href="/" class="nav-home nav">
				首页
			</a>
		
			<a href="/archives" class="nav-archives nav">
				归档
			</a>
		
			<a href="/about" class="nav-about nav">
				关于
			</a>
		
	</nav>
</aside>

    <script>setLoadingBarProgress(40);</script>
  <div class="l_body">
    <div class='container clearfix'>
      <!-- 左侧内容 -->
      <div class='l_main'>
        <article id="post-js-react"
  class="post white-box article-type-post"
  itemscope itemprop="blogPost">
	<section class='meta'>

	<h2 class="title">
  	<a href="/2018/08/08/js-react/">
    	【React入门】实现todolist功能
    </a>
	</h2>

	<div class="pagenav">
		<time>
			2018-08-08
		</time>

		
    
    <div class='cats'>
        <i class="icon icon-bookmark"></i>
        <a href="/categories/React/">React</a>
    </div>


		
			<div class="pagetags">
				<i class="icon icon-price-tag" style="margin-right: 2px;"></i>
				
					<a href="/tags/web/" style="margin-left: 3px;">
						web
					</a>
				
			</div>
			
	</div>
	</section>

	
	<section class="toc-wrapper"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#开发环境准备"><span class="toc-text"> 开发环境准备</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#安装-nodejs"><span class="toc-text"> 安装 node.js</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#创建-react-应用"><span class="toc-text"> 创建 react 应用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#目录结构"><span class="toc-text"> 目录结构</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#代码实现"><span class="toc-text"> 代码实现</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#准备工作"><span class="toc-text"> 准备工作</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#未完待续"><span class="toc-text"> 未完待续</span></a></li></ol></li></ol></section>
	

	<section class="article typo">
		<div class="article-entry" itemprop="articleBody">
				<span class="zhaiyao">[摘要]</span>
			<p>作为一名 PHP 初级的程序员，目前尚且处于学习 PHP 业务逻辑实现到日常工作中的阶段，但是由于现在想要搭建一个满意的个人博客，并且尝试过很多 hexo 主题后总是会对主题的某些或某个部分不太满意，<br>
所以为了以后可以自己实现相应页面的开发，所以还是想着能够学点前端框架的知识，为以后成为全栈工程师做准备。目前比较流行的前端框架主要有<code>React.js</code>和<code>Vue.js</code>，因为当前公司使用的是<code>React.js</code>开发的，所以也选择<code>React</code>作为学习对象。</p>
<a id="more"></a>
<h2 id="开发环境准备"><a class="markdownIt-Anchor" href="#开发环境准备"></a> 开发环境准备</h2>
<h3 id="安装-nodejs"><a class="markdownIt-Anchor" href="#安装-nodejs"></a> 安装 node.js</h3>
<p>建议在 React 中使用 CommonJS 模块系统，比如 browserify 或 webpack(推荐使用)。</p>
<p>使用淘宝定制的 cpm 命令行工具代替默认的 npm</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm install -g cnpm --registry=https://registry.npm.taobao.org</span><br><span class="line">npm config <span class="built_in">set</span> registry https://registry.npm.taobao.org</span><br></pre></td></tr></table></figure>
<p>这样就可以使用 cnpm 命令来代替 npm 进行安装模块了：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm install [name]</span><br></pre></td></tr></table></figure>
<h3 id="创建-react-应用"><a class="markdownIt-Anchor" href="#创建-react-应用"></a> 创建 react 应用</h3>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">cnpm install -g create-react-app</span><br><span class="line"><span class="built_in">cd</span> todolist-react/</span><br><span class="line">npm start</span><br></pre></td></tr></table></figure>
<h3 id="目录结构"><a class="markdownIt-Anchor" href="#目录结构"></a> 目录结构</h3>
<ul>
<li>原始结构</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">todolist-react/</span><br><span class="line">    node_modules/</span><br><span class="line">    public/</span><br><span class="line">        favicon.ico</span><br><span class="line">        index.html</span><br><span class="line">        manifest.json</span><br><span class="line">    src/</span><br><span class="line">        App.css</span><br><span class="line">        App.js</span><br><span class="line">        App.test.js</span><br><span class="line">        index.css</span><br><span class="line">        index.js</span><br><span class="line">        logo.svg</span><br><span class="line">    README.md</span><br><span class="line">    package-lock.json</span><br><span class="line">    package.json</span><br><span class="line">    .gitignore</span><br></pre></td></tr></table></figure>
<h2 id="代码实现"><a class="markdownIt-Anchor" href="#代码实现"></a> 代码实现</h2>
<h3 id="准备工作"><a class="markdownIt-Anchor" href="#准备工作"></a> 准备工作</h3>
<p>（1）编写 todolist 功能时，对默认项目的文件进行删减，只需要保留主要的文件即可。</p>
<p>将<code>App.js</code>重命名为<code>TodoList.js</code>，创建文件<code>TodoItem.js</code>。</p>
<ul>
<li>精简后的文件结构</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">todolist-react/</span><br><span class="line">    node_modules/</span><br><span class="line">    public/</span><br><span class="line">        favicon.ico</span><br><span class="line">        index.html</span><br><span class="line">        manifest.json</span><br><span class="line">    src/</span><br><span class="line">        TodoList.js</span><br><span class="line">        TodoItem.js</span><br><span class="line">        index.js</span><br><span class="line">    README.md</span><br><span class="line">    package-lock.json</span><br><span class="line">    package.json</span><br><span class="line">    .gitignore</span><br></pre></td></tr></table></figure>
<p>（2）组件拆分</p>
<p><code>React</code> 的组件开发意思是将页面上每个部分作为一个组件，然后通过每个组件之间的通信，进行数据交互，实现完整页面的渲染。</p>
<p><code>TodoList</code> 功能包括用户输入部分和 <code>List</code> 清单部分，所以将整个功能拆分为两部分。用户输入部分为<code>TodoList</code>; <code>List</code>清单部分为<code>TodoItem</code>。</p>
<p>（3）<code>index.js</code>代码实现</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">"react"</span>;</span><br><span class="line"><span class="keyword">import</span> ReactDOM <span class="keyword">from</span> <span class="string">"react-dom"</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 引入TodoList组件</span></span><br><span class="line"><span class="keyword">import</span> TodoList <span class="keyword">from</span> <span class="string">"./TodoList"</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 获取TodoList返回的数据，并渲染到id为root的元素节点中</span></span><br><span class="line">ReactDOM.render(<span class="xml"><span class="tag">&lt;<span class="name">TodoList</span> /&gt;</span>, document.getElementById("root"));</span></span><br></pre></td></tr></table></figure>
<p>（4）<code>TodoList.js</code>代码实现</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 引入React类，引入React.Component组件类</span></span><br><span class="line"><span class="keyword">import</span> React, &#123; Component&#125; <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"><span class="comment">// 从当前目录下的TodoItem.js中引入TodoItem子组件</span></span><br><span class="line"><span class="keyword">import</span> TodoItem <span class="keyword">from</span> <span class="string">'./TodoItem'</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 组件定义和实现</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">TodoList</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="comment">// 通过render() 方法渲染页面数据</span></span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      &lt;div&gt;</span><br><span class="line">        &lt;div&gt;</span><br><span class="line">          &lt;input value=&#123;<span class="keyword">this</span>.state.inputValue&#125; onChange=&#123;<span class="keyword">this</span>.handleInputChange&#125;/&gt;</span><br><span class="line">          &lt;button onClick=&#123;<span class="keyword">this</span>.handleBtnClick&#125;&gt;add&lt;<span class="regexp">/button&gt;</span></span><br><span class="line"><span class="regexp">        &lt;/</span>div&gt;</span><br><span class="line">        &lt;ul&gt;</span><br><span class="line">        &#123;</span><br><span class="line">            <span class="keyword">return</span> (</span><br><span class="line">                <span class="keyword">this</span>.state.list.map(<span class="function">(<span class="params">item, index</span>) =&gt;</span> &#123;</span><br><span class="line">                    <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">TodoItem</span> <span class="attr">key</span>=<span class="string">&#123;index&#125;</span> <span class="attr">content</span>=<span class="string">&#123;item&#125;</span> <span class="attr">index</span>=<span class="string">&#123;index&#125;</span> <span class="attr">delete</span>=<span class="string">&#123;this.handleDelete&#125;/</span>&gt;</span></span></span><br><span class="line"><span class="xml">                &#125;)</span></span><br><span class="line"><span class="xml">            )</span></span><br><span class="line"><span class="xml">        &#125;</span></span><br><span class="line"><span class="xml">        <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span></span><br><span class="line">      &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">    );</span></span><br><span class="line"><span class="regexp">  &#125;</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure>
<h3 id="未完待续"><a class="markdownIt-Anchor" href="#未完待续"></a> 未完待续</h3>

		</div>

		
			<div class="art-item-footer">
					
						<span class="art-item-left"><i class="icon icon-chevron-thin-left"></i> <a href="/2018/08/13/git-modify-commit-message/" rel="prev" title="【Git】修改已经提交的commit内容">
							【Git】修改已经提交的commit内容
						</a>上一篇文章</span>
					
					
						<span class="art-item-right">下一篇文章：<a href="/2018/08/07/tp5-controller3/" rel="next"  title="【ThinkPHP5深入理解】控制器（三）-- 前置操作">
							【ThinkPHP5深入理解】控制器（三）-- 前置操作
						</a><i class="icon icon-chevron-thin-right"></i></span>
					
			</div>
		

		
			

    <div class="recommended_posts">
        <h3>推荐文章</h3>
        <ul>
            
                <li><a href="http://blog.i2arch.tech/2018/08/13/git-modify-commit-message/">【Git】修改已经提交的commit内容</a></li>
            
                <li><a href="http://blog.i2arch.tech/2018/08/07/tp5-controller3/">【ThinkPHP5深入理解】控制器（三）-- 前置操作</a></li>
            
                <li><a href="http://blog.i2arch.tech/2018/07/31/docker-base/">【Docker】--入门使用</a></li>
            
                <li><a href="http://blog.i2arch.tech/2018/07/31/docker-install/">【Docker】--安装与配置</a></li>
            
        </ul>
    </div>


		
	</section>

	

</article>
<script>
	window.subData = {
		title: '【React入门】实现todolist功能',
		tools: true
	}
</script>

      </div>

      <!-- 右侧边栏组件 -->
      <aside class='l_side'>
        
      </aside>

      <div class="gotop">
          
    <a href='javascript:void(0)'>
        <i class="icon icon-arrow_upward flat-box">
        </i>
    </a>

      </div>
      <script>setLoadingBarProgress(60);</script>
    </div>
  </div>
  <footer id="footer" class="clearfix">

	<div class="social-wrapper">
  	
      
        <a href="https://github.com/zqunor" class="social github"
          target="_blank" rel="external">
          <span class="icon icon-github"></span>
        </a>
      
        <a href="https://www.cnblogs.com/zqunor" class="social zhihu"
          target="_blank" rel="external">
          <span class="icon icon-zhihu"></span>
        </a>
      
        <a href="/atom.xml" class="social rss"
          target="_blank" rel="external">
          <span class="icon icon-rss"></span>
        </a>
      
    
  </div>
  <div>Theme <a href='https://github.com/stkevintan/hexo-theme-material-flow' class="codename">MaterialFlow</a>  Powered by<a href="https://blog.i2arch.tech/" target="_blank">程序小工</a>.</div>

</footer>

  <script>setLoadingBarProgress(80);</script>
  

    <script src="//apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src='//cdn.bootcss.com/node-waves/0.7.5/waves.min.js'></script>
    <script src="//cdn.bootcss.com/scrollReveal.js/3.3.2/scrollreveal.min.js"></script>
    <script src="/js/jquery.fitvids.js"></script>
      <script>
        var GOOGLE_CUSTOM_SEARCH_API_KEY = "";
        var GOOGLE_CUSTOM_SEARCH_ENGINE_ID = "";
        var ALGOLIA_API_KEY = "";
        var ALGOLIA_APP_ID = "";
        var ALGOLIA_INDEX_NAME = "";
        var AZURE_SERVICE_NAME = "";
        var AZURE_INDEX_NAME = "";
        var AZURE_QUERY_KEY = "";
        var BAIDU_API_ID = "fca5b83cf69f752ddc96a61ef64a3659";
        var SEARCH_SERVICE = "hexo";
        var ROOT = "/" || "/";
        if (!ROOT.endsWith('/')) ROOT += '/';
      </script>
      <script src="/js/search.js"></script>
        <script src="/js/app.js"></script>
  <script>setLoadingBarProgress(100);</script>
</body>
</html>
